<template>
    <div id="app">
        <hucaiAreaSelect
                v-bind:addressList="addressList"
                v-bind:rootAddress="rootAddress"
                v-bind:resultJson="resultJson"
                v-on:load-data="loadData"
        />

        <div style="margin: 30px 0;"></div>
        <!--测试-->
        <div>测试加载后的所有数据：2222{{JSON.stringify(addressList)}}</div>
        <div style="margin: 30px 0;"></div>
        <!--测试-->
        <div>格式化后传给后台的数据：{{JSON.stringify(resultJson)}}</div>
    </div>
</template>

<script>
    import hucaiAreaSelect from './hucai-area-select/index'
    var str = "[{\"id\":\"中华人民共和国\",\"pid\":0,\"name\":\"中华人民共和国\",\"level\":0,\"children\":[{\"id\":\"广东\",\"pid\":\"中华人民共和国\",\"name\":\"广东\",\"level\":1,\"children\":[{\"id\":\"清远\",\"pid\":\"广东\",\"name\":\"清远\",\"level\":2,\"children\":[{\"id\":\"清城区\",\"pid\":\"清远\",\"name\":\"清城区\",\"level\":3,\"children\":[],\"check\":true},{\"id\":\"清新区\",\"pid\":\"清远\",\"name\":\"清新区\",\"level\":3,\"children\":[],\"check\":true}],\"check\":true,\"indeterminate\":false},{\"id\":\"东莞\",\"pid\":\"广东\",\"name\":\"东莞\",\"level\":2,\"children\":[],\"check\":true}],\"check\":true,\"indeterminate\":false},{\"id\":\"广西\",\"pid\":\"中华人民共和国\",\"name\":\"广西\",\"level\":1,\"children\":[]}],\"check\":true,\"indeterminate\":true}]";
    var json = JSON.parse(str)
    export default {
        name: 'app',
        data() {
            return {
                addressList: json,//最终返回的值
                resultJson: [],//传给后台的数据
                rootAddress: {
                    'id': '中华人民共和国',
                    'pid': 0,
                    'name': '中华人民共和国',
                    'level': 0,
                    'children': []
                }
            }
        }, mounted() {

        },
        components: {
            hucaiAreaSelect
        }, methods: {
            loadData(node, appendData) {
                var that = this
                this.$axios.get('/static/demo.json')
                    .then(function (data) { // 请求失败处理
                        var list = that.setData(data.data.RECORDS, node)
                        appendData(list, node)
                    })
                    .catch(function (error) { // 请求失败处理
                    })
            },
            //模拟设置数据
            setData(addlist, node) {
                var aList = []
                for (var i = 0; i < addlist.length; i++) {
                    var address = addlist[i]
                    address.children = []
                    if (address.pid === node.id) {//根据父id匹配数据
                        address.check = node.check//如果父是选中状态，则加载的节点也是选择状态
                        aList.push(address)
                    }
                }
                return aList;
            },
        }
    }
</script>

<style>
    /*#app {*/
    /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*-moz-osx-font-smoothing: grayscale;*/
    /*text-align: center;*/
    /*color: #2c3e50;*/
    /*margin-top: 60px;*/
    /*}*/
</style>
